<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../assets/css/common.css">
    <link rel="stylesheet" href="../assets/css/vue.css">
    <script src="../assets/js/vue.js"></script>
</head>
<body>
    <div id="app">
        <a href="../index.html" class="retu">BACK</a>
        <h1>props属性</h1>
        <panda v-bind:here="message" to-there="America"></panda>
        <hr>
        <span>自定义组件,属性定义了之后  需要在模板中使用  但是在使用之前必须在vue的props中定义此属性,如果遇到-连接的单词的属性,那么就必须使用驼峰命名</span>
    </div>

    <script type="text/javascript">
        var app = new Vue({
            el:"#app",
            data:{
                message:'Sichuan'
            },
            components:{
                "panda" : {
                    template:`<div style="color: red">Panada from {{ here }} And To {{ toThere }}</div>`,
                    props:['here','toThere']
                }
            }
        });
    </script>
</body>
</html>